<!--
 * @Author: your name
 * @Date: 2022-01-07 11:26:11
 * @LastEditTime: 2022-01-15 19:41:25
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \elementui\src\components\all.vue
-->
<template>
  <div style="width: 100%; overflow: scroll">
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown trigger="click">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <span @click="dialogFormVisible = true"
              ><el-dropdown-item>新增</el-dropdown-item></span
            >
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>
    </el-container>
    <!-- 内容表格 -->
    <el-container>
      <el-main>
        <el-table
          :data="tableData"
          stripe
          height="370"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- 增加内容表单 -->
    <Mydialog 
    :title="title" 
    :dialogFormVisible="dialogFormVisible"
    :formLabelWidth="formLabelWidth"
    :tables="tables"
    @df="df"
    @quxiao="df"
    ></Mydialog>
  </div>
</template>
<script>
import instance from "../api";
import Mydialog from "../components/Mydialog"
export default {
  name: "All",
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      tables:"tables",// 这是地址
      title:"人员管理新增",// 这是标题
      formLabelWidth: "120px",
    };
  },
  created() {
    this.fn_all(); //将钩子函数与当前函数进行分离
  },
  methods: {
    //   数据请求
    async fn_all() {
      let { data } = await instance.get("tables");
      this.tableData = data;
    },
    // 单选框的按钮
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除
    async handleDelete(i, n) {
      // 因为请求数据都是进行异步的请求，所以要封装成异步函数
      console.log(i, n);
      await instance.delete("tables/" + n.id);
      this.fn_all(); //更新前端的数据
    },
    df(){
        // console.log(i);
        this.dialogFormVisible=false;
        this.fn_all(); //更新前端的数据
    }
  },
  components:{
      Mydialog,
  }
};
</script>
<style scope>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
</style>